<template>
<!-- 新增权限组 -->
  <div class="add-form">
    <el-dialog :title="Node.id ? '编辑' : '新增'" :visible="showDialog" @close='handleClose'>
      <el-form
        :rules="ruleInline"
        ref="dataForm"
        :model="formBase"
        label-position="left"
        label-width="120px"
        style="width: 400px;"
      >
        <el-form-item :label="$t('table.username')" prop="title">
          <el-input v-model="formBase.title"></el-input>
        </el-form-item>
        <el-form-item :label="$t('table.powerDistriB')" >
            <!-- :data="treeData" -->
            <!-- @check="handleCheckChange" -->
          <el-tree
            ref="treeMenu"
            :show-checkbox="true"
            :data="MenuList"
            node-key="id"
            :default-expanded-keys="[0]"
            :default-checked-keys="formBase.permissions"
            :props="defaultProps"
           :default-expand-all="true"

          ></el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="handleAdd">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// detail, update,, detail as MenuDetail
import { add, detail, update } from '@/api/base/permissions'
import { list } from '@/api/base/menus.js'
// const _this = []
export default {
  name: 'usersAdd',
  props: ['ruleInline', 'showDialog', 'node'],
  data () {
    return {
      defaultProps: {
        label: 'title',
        children: 'childs'
      },
      formBase: {
        id: 0,
        create_date: '',
        title: '',
        permissions: []
      },
      MenuList: [],
      Node: []
    }
  },
  methods: {
    // 获取权限列表
    async getMenuList () {
      const res = await list()
      this.MenuList = res.data
    //   console.log(res)
    },
    // 获取权限详情
    async getPerDetail (node) {
      const res = await detail(node)
      //   console.log('detail', res)
      this.formBase = res.data
      this.Node = node
    },
    // 表单提交
    async handleAdd () {
      this.formBase.permissions = this.$refs.treeMenu.getCheckedKeys()
      await this.$refs.dataForm.validate()
      if (this.Node.id) {
        await update(this.formBase) // 编辑
      } else {
        await add({ title: this.formBase.title, permissions: this.formBase.permissions }) // 新增
      }
      this.$message.success(this.Node.id ? '编辑成功' : '新增成功')
      this.$emit('getAdd')
      this.$emit('update:showDialog', false)
    },
    // 退出
    handleClose () {
      this.formBase = { // 表单重置
        id: 0,
        title: '',
        permissions: []
      }
      this.Node = []
      this.$refs.dataForm.clearValidate()
      this.$emit('update:showDialog', false)
    }

  }
}
</script>
<style scoped>
.el-tree {
  margin-top: 8px;
}
.el-tree-node__content {
  height: auto;
}
.el-form--label-left .el-form-item__label {
  text-align: right;
}
.el-dialog__footer {
  text-align: right;
}
</style>
